/*
 * @Description: 定制班线首页
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:48:52
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-31 20:02:50
 */
<template>
  <div
    class="main flex-v flex-hc"
    v-wechat-title="$route.meta.title"
  >
    <div class="bitmap">
      <img
        :src="imgSrc.bitmap"
        @click="goToSolicitOpinion"
      >
    </div>
    <div class="bus_list">
      <bus-item
        v-for="(bus, index) in busList"
        :key="index"
        :busInfo="bus"
        :routeIndex='index'
        v-show="busList.length!==0"
      ></bus-item>
      <div
        class="no_data"
        v-show="busList.length===0"
      >
        <img :src="imgSrc.noData">
        <p class="fontsize32">暂无运行路线</p>
      </div>
    </div>
    <foot-bar selectedIndex="0"></foot-bar>
  </div>
</template>

<script>
import { getRouteList } from './../../interface/getInterface'
import { XBScroll } from 'vue-xb-ui-depot'
import { verifyUserSession } from '../../utils/wxLogin.js'
export default {
  components: {
    'xb-scroll': XBScroll
  },
  data() {
    return {
      imgSrc: {
        bitmap: require('@wechat/img/bitmap.png'), // 页面顶部图片
        noData: require('@wechat/img/no-data.png') // 无数据图片
      },
      busList: [], // 线路数据
      loadingState: true, // 页面加载状态
      loadingType: 'loading', // 页面加载类型
      useBody: false,
      up: {
        noMoreSize: 21,
        page: { size: 20 }
      }
    }
  },
  mounted() {
    verifyUserSession(this) // 校验用户授权信息是否有效
    // 修改url的#号
    if (window.location.href.indexOf('?#') < 0) {
      window.location.href = window.location.href.replace('#', '?#')
    }
    this.getLineTicketList()
  },
  methods: {
    getLineTicketList() {
      getRouteList().then(data => { // 请求成功接收数据关闭页面加载中状态
        if (data && data.COUNT > 0) {
          this.busList = data.LIST
        }
      }).catch(err => { // 请求失败显示页面加载错误
        console.log(err)
      })
    },

    // 跳转至征集意见页面
    goToSolicitOpinion() {
      this.$router.push('/nonstopLIne/customBus/App')
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  background-color: #f2f5f6;
  // margin-bottom: 100px;
  padding-bottom: 100px;
  .bitmap {
    box-sizing: border-box;
    width: 686px;
    height: 200px;
    margin: 32px 32px 0 32px;
    // padding: 32px;
    img {
      width: 686px;
    }
  }
  .bus_list {
    .no_data {
      width: 522px;
      height: 320px;
      margin: auto;
      img {
        width: 522px;
        height: 320px;
      }
      p {
        font-weight: 400;
        color: #9fb0b2;
        text-align: center;
        padding-top: 26px;
      }
    }
  }
}
</style>
